<template>
  <div class="questionnaire">
    <div class="header">
      <span>第 {{ currentQuestionIndex + 1 }} 题</span>
      <span>/</span>
      <span>总共{{ totalQuestions }}题</span>
    </div>
    <div class="question" :style="{ background: 'rgba(80, 188, 231, 0.979)' }">
      {{ questions[currentQuestionIndex].text }}
    </div>
    <div class="options" :style="{ background: 'white' }">
      <label v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
        <input type="radio" v-model="selectedOption" :value="option">
        {{ option }}
      </label>
    </div>
    <div class="buttons">
      <el-button type="primary" v-if="currentQuestionIndex < totalQuestions - 1" @click="nextQuestion">下一题</el-button>
      <el-button type="primary" :plain="true" v-else @click="finish">完成</el-button>
      <el-button @click="cancel" :plain="true">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      currentQuestionIndex: 0,
      selectedOption: '',
      questions: [
        {
          text: '1.你受凉或吃（喝）凉的东西后，容易腹泻（拉肚子）吗？',
          options: ['是', '否']
        },
        {
          text: '2.您胃脘部、背部或腰膝部怕冷吗？',
          options: ['是', '否']
        },
        {
          text: '3.您吃（喝）凉的东西会感到不舒服或者怕吃（喝）凉东西吗？',
          options: ['是', '否']
        },
        {
          text: '4.您比一般人受不了寒冷（冬天的寒冷，夏天的冷空调、电扇等）',
          options: ['是', '否']
        },
        {
          text: '5.您晚上睡觉是否失眠、多梦？',
          options: ['是', '否']
        },
        // 添加更多问题...
      ]
    };
  },
  computed: {
    totalQuestions() {
      return this.questions.length;
    }
  },
  methods: {
    nextQuestion() {
      if (this.selectedOption !== '') {
        this.currentQuestionIndex++;
        this.selectedOption = '';
      }
    },
    finish() {
      if (this.selectedOption !== '') {
        const loading = this.$loading({
          lock: true,
          text: '拼命评估中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
        // 提交问卷调查
        this.$message({
          message: '恭喜你，提交成功！',
          type: 'success',
          
        });

      }
      this.$router.push('/home/suggestions');

    },
    cancel() {
      // 取消操作
      this.$message({
          message: '你已经取消！',
          type: 'warning'
        });
    }
  }
}
</script>

<style scoped>
.questionnaire {
  width: 85%;
  margin: 0 auto;
}

.header {
  text-align: right;
  font-size: 15px;
}

.question {
  padding: 30px;
  color: white;
  font-size: 30px;
}

.options {
  padding: 25px;
  font-size: 25px;
}

.buttons {
  padding: 20px;
  text-align: right;
}
</style>